<template>
  <div class="login-container">
    <!-- 头部 Logo -->
    <header>
      <img src="../assets/images/home/LE_logo_2.png" alt="" />
    </header>
    <!-- 登录页的主体 -->
    <div class="content-body">
      <!-- 头部 -->
      <div class="content-header">
        <a href="javascript:;" @click="goLogin" :style="{background:(ToggleLR?'#fff': '#f5f5f5')}">登录</a>
        <a href="javascript:;" @click="goRegiser" :style="{background:(ToggleLR?'#f5f5f5': '#fff')}">注册</a>
      </div>
      <!-- 放置登录注册组件 -->
      <div class="login-page-main">
        <!-- 缓存组件 -->
        <keep-alive>
          <LeLogin v-if="ToggleLR"></LeLogin>
          <LeRegister @openLogin="openLogin" v-else></LeRegister>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import LeLogin from '@/components/loginPage/LeLogin.vue'
import LeRegister from '@/components/loginPage/LeRegister.vue'
export default {
  data() {
    return {
      ToggleLR: true // 控制登录与注册组件的显示与隐藏
    }
  },
  methods: {
    // 展示登陆组件
    goLogin() {
      this.ToggleLR = true
    },
    // 展示注册组件
    goRegiser() {
      this.ToggleLR = false
    },
    openLogin() {
      this.ToggleLR = true
    }
  },
  components: {
    LeLogin,
    LeRegister
  }
}
</script>

<style lang="less" scoped>
.login-container {
  header {
    border-bottom: 1px solid #e9e9e9;
    text-align: center;
    padding: 2px 0;
    img {
      width: 208px;
    }
  }
  .content-body {
    .content-header {
      a {
        display: inline-block;
        width: 50%;
        text-decoration: none;
        color: #000;
        text-align: center;
        line-height: 60px;
        background-color: #f5f5f5;
        box-sizing: border-box;
        &:hover {
          border-top: 1px solid #e9e9e9;
          background-color: #fff;
        }
      }
    }
    .login-page-main {
    }
  }
}
</style>